<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>VRS</title>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/javascript.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../js/localstorage.js"></script>
		<script type="text/javascript" src="../js/qrcode.js"></script>
		<link rel="stylesheet" href="../css/Stylesheet.css" />
		<style>
			.tdS {
				background: #99FFFF;
			}
			
			.tdS:hover {
				background: #66CCFF;
			}
			
			.tdI:hover {
				background: #FF9999;
			}
			
			.tdI {
				cursor: pointer;
				background: #FFCCCC;
			}
			#bg {
				display: none;
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: black;
				z-index: 1001;
				-moz-opacity: 0.7;
				opacity: .70;
				filter: alpha(opacity=70);
			}
			div.list_paging_top, div.list_paging_bottom, div.ExportLinks a {
			    height: auto;
			}
			img{
				cursor: pointer;
			}
			#show {
				display: none;
				position: absolute;
				top: 25%;
				left: 42%;
				width: 280px;
				height: 280px;
				padding: 8px;
				border: 8px solid #E8E9F7;
				background-color: white;
				z-index: 1002;
				overflow: auto;
			}
			tr,td {
				text-align: center;
			}
			th{
				text-align: center;
			}
			.button,
			tr td button {
				padding: 2px 10px;
				margin: 0px 3px;
				background: #009bce;
				border-radius: 4px;
				border: 1px;
				color: #fff;
			}
			.table {
				box-shadow: 0 0;
			}
		</style>
	</head>

	<body>



<div class="dropdown" style="position: absolute;right: 30px;top:10px;z-index: 100;color: #fff;">
				<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" style="background: #03a9f4 ; color: #fff;">
					<script>document.write(language.Language_switching)</script><span class="caret"></span>
				</button>
				<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
					<li role="presentation">
						<a role="menuitem" tabindex="-1" href="#" onclick="localStorage.setItem('language','zh_cn');location.reload()">简体中文</a>
					</li>
					<li role="presentation">
                <a role="menuitem" tabindex="-1" href="#" onclick="localStorage.setItem('language','zh_tw');location.reload()">繁体中文</a>
            </li>
					<li role="presentation">
						<a role="menuitem" tabindex="-1" href="#" onclick="localStorage.setItem('language','en');location.reload()">English</a>
					</li>
				</ul>
			</div>
 <div id="headercontainer">
        <img src="../img/TourTrax-Logo.png" alt="TourTrax logo" class="mobilizelogo">
        <!-- <div class="mobilizelogo" style="color: #0fb5f1;font-size: 2.5em;margin: 0px;margin-left: 10px;line-height: 85px;"> -->
            <!-- <script>document.write(language.zizhu_yufang)</script> -->
        <!-- </div> -->
        <!-- <img class="customerLogo" src="" alt="BCS TourTrax 2.0 (Demo)" title="BCS TourTrax 2.0 (Demo)"> -->
        <div class="logindetails">
            <p>
                <script>document.write(language.Welcome)</script>
                <a href="javascript:;"><script>document.write(language.account)</script></a> or
                <a href="#" onclick="location.href='../login.html'"><script>document.write(language.login_out)</script></a>
            </p>
            <p>
                <a href="javascript:;"><img src="img/helpicon.png" alt="help icon"></a> 
                <a href="javascript:;"><script>document.write(language.help)</script></a>
            </p>
        </div>
        <!--End logindetails-->
    </div>

		<!-- <div class="pageheader"> -->
			<!-- <div class="clear"></div> -->
			<!-- <img src="/Icons/fangke.png" alt="Customers" title="Customers"> -->
			<!-- <h1>承办商预约</h1> -->
		<!-- </div> -->
	<div id="bg" onclick="hidediv()"></div>
		<img id="show" src="" alt="" />
		<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="ModalLabel"><script>document.write(language.zizhu_yucheng)</script></h4>
					</div>
					<form action="">
						<div class="modal-body">
							<table class="table">
								<tbody>
									<tr>
										<td>
											<script>
												document.write(language.name)
											</script>
										</td>
										<td><input id="name" name="name" class="form-control" type="text" /></td>
									</tr>
									<tr>
										<td>
											<script>
												document.write(language.position)
											</script>
										</td>
										<td><input id="stel" name="stel" class="form-control" type="text" /></td>
									</tr>
									<tr>
										<td>
											<script>
												document.write(language.telphone)
											</script>
										</td>
										<td><input id="tel" name="tel" class="form-control" type="text" /></td>
									</tr>
									<tr>
										<td>
											<script>
												document.write(language.Visitor_time)
											</script>
										</td>
										<td><input id="tim" name="tim" class="form-control" type="date" /></td>
									</tr>
									<tr>
										<td>
											<script>
												document.write(language.id_number)
											</script>
										</td>
										<td><input id="code" name="code" class="form-control" type="text" /></td>
									</tr>
									<tr>
										<td>
											<script>document.write(language.entry_name)</script>
										</td>
										<td><input id="sname" name="sname" class="form-control" type="text" /></td>
									</tr>
									
									
								</tbody>
							</table>
						</div>
					</form>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal"><script>document.write(language.close)</script></button>
						<button type="button" class="btn btn-primary" onclick="sub()"><script>document.write(language.Submit)</script></button>
					</div>
				</div>
			</div>
		</div>
		<div style="display: none;">
		 	<p>内容：<input type="text" id="content" value="http://weibo.com/fdipzone" /></p>
		    <p>尺寸：<input type="text" id="size" value="150"></p>
		    <p><button id="send">生成二维码</button></p>
		    <p><a id="xia" href="" download="qrcode">下载二维码</a></p>
		    <div id="qrcode"></div>
		 </div>
		<div class="listFilter" style="margin: 20px;">
			<h2><a href="javascript:history.go(-1);"><script>document.write(language.Return)</script></a></h2>
			<!-- <h2><script>document.write(language.Filter)</script><span class="tooltip" style="display: none;"><em>(筛选下表)</em></span></h2> -->
			<!-- <a href="#" class="tooltoggle">显示/隐藏工具提示</a> -->
			<div class="divider"></div>
			<table width="100%">
				<tbody>
					<tr>
						<td class="FormLabel" style="width: auto;">
							<script>document.write(language.Date_Filters)</script>：&nbsp;&nbsp;
							<input type="date" id="">&nbsp;&nbsp;<script>document.write(language.to)</script>&nbsp;&nbsp;<input type="date" id="">
							&nbsp;&nbsp;&nbsp;&nbsp;<button><script>document.write(language.Filter)</script></button>
						</td>
						<td style="text-align: right;">&nbsp;&nbsp;&nbsp;&nbsp;
							<div class="button" data-toggle="modal" data-target="#Modal" onclick="cl()" style="text-align: center;float: right;cursor: pointer;">
								<script>
									document.write(language.add+language.staff)
								</script>
							</div>
						</td>
					</tr>
				</tbody>
			</table>

			<div class="list_table" id="ltReport_list">
				<table cellspacing="0" class="list_table" id="ltReport_list" width="100%">
					<thead>
						<tr>
							<th class="FirstColumn">
								<script>document.write(language.Contractor)</script>
							</th>
							<th>
								<script>document.write(language.Person_in_charge)</script>
							</th>
							<th>
								<script>document.write(language.entry_name)</script>
							</th>
							<th>
								<script>document.write(language.project_cycle)</script>
							</th>
							<th>
								<script>document.write(language.Item_number)</script>
							</th>
							<th>
								<script>document.write(language.project_size)</script>
							</th>
						</tr>
					</thead>
					<tbody>
						<tr class="odd_row">
							<td>Chan Da Min</td>
							<td>Mr Li</td>
							<td>Electronic project</td>
							<td>1 Year</td>
							<td>CD-88965</td>
							<td>20 persons</td>
						</tr>

					</tbody>
				</table>

			</div>
			<div class="clear"></div>

		</div>

		<div class="reportResults" style="margin: 20px;">
			<div class="list_table" id="ltAlarms_list">
				<table class="list_table" id="ltReport_list" width="100%" cellspacing="0" style="text-align: center;">
					<thead>
						<tr>
							<th>
								<script>document.write(language.name)</script>
							</th>
							<th>
								<script>document.write(language.Contact_number)</script>
							</th>
							<th>
								<script>document.write(language.Appointment)</script>
							</th>
							<th>
								<script>document.write(language.id_number)</script>
							</th>
							<th>
								<script>document.write(language.Id_name)</script>
							</th>
							<th>
								<script>document.write(language.ID_number)</script>
							</th>
							<th>
								<script>document.write(language.Work_Area)</script>
							</th>
							<th>
								<script>document.write(language.entry_name)</script>
							</th>
							<th style="width:8%;"><script>document.write(language.Visiting_time)</script></th>
							<th>
								<script>document.write(language.position)</script>
							</th>
							<th>
								<script>document.write(language.QR_code)</script>
							</th>
							<th width="10%"><script>document.write(language.operation)</script></th>
						</tr>
					</thead>
					<tbody id="tbody">
						<tr class="odd_row">
							<td>Chan Da Min</td>
							<td>6038-7328</td>
							<td>10-08-2017</td>
							<td>A8086***</td>
							<td>Construction Industry Safety Training Certificate</td>
							<td>HRJD14000001</td>
							<td>Site A</td>
							<td>Mary Lee</td>
							<td>2H</td>
							<td>Engineer</td>
							<td><img onclick="qrimg(this)" style="width: 30px;height: 30px;" src="img/code1.png"></td>
							<td>
								<button><script>document.write(language.edit)</script></button>
								<button><script>document.write(language.delete)</script></button>
							</td>
						</tr>
						<tr class="even_row">
							<td>Chan Da Min</td>
							<td>6038-7328</td>
							<td>10-08-2017</td>
							<td>A8086***</td>
							<td>certificate of Registration of Electical Wirjer</td>
							<td>W071759</td>
							<td>Site B</td>
							<td>Mary Lee</td>
							<td>2H</td>
							<td>Engineer</td>
							<td><img onclick="qrimg(this)" style="width: 30px;height: 30px;" src="img/code1.png"></td>
							<td>
								<button><script>document.write(language.edit)</script></button>
								<button><script>document.write(language.delete)</script></button>
							</td>
						</tr>
						<tr class="odd_row">
							<td>Chan Da Min</td>
							<td>6038-7328</td>
							<td>10-08-2017</td>
							<td>A8086***</td>
							<td>Shipboard Cargo Handling Basic Safety Traububg Ciyrse</td>
							<td>CHJD-000001</td>
							<td>Site C</td>
							<td>Mary Lee</td>
							<td>2H</td>
							<td>Engineer</td>
							<td><img onclick="qrimg(this)" style="width: 30px;height: 30px;" src="img/code1.png"></td>
							<td>
								<button><script>document.write(language.edit)</script></button>
								<button><script>document.write(language.delete)</script></button>
							</td>
						</tr>
						
						

					</tbody>
				</table>
				
			<div class="ExportLinks">
				<a href="#"><script>document.write(language.Export_all_to)</script> Excel</a>
				<a href="#"><script>document.write(language.Export_this_page_to)</script> Excel</a>
				<a href="#"><script>document.write(language.Export_this_page_to)</script> PDF</a>
				<a href="#"><script>document.write(language.Export_all_to)</script> PDF</a>
				<a href="#"><script>document.write(language.send)</script> <script>document.write(language.email)</script></a>
			</div>
			<div class="WhereToLinks"></div>
			</div>

			<div class="clear"></div>

		</div>
		
		
		<script type="text/javascript">
		function qrimg(o) {
					var src = $(o).attr('src');			
					$('#bg').show();
					$('#show').attr('src', src).show();
			}
		function hidediv() {
				$('#bg').hide();
				$('#show').hide();
			}
		function cl(){
			$("#name").val("");
			$("#tel").val("");
			$("#tim").val("");
			$("#code").val("");
			$("#sname").val("");
			$("#stel").val("");
			
		}
		function sub() {
			var d = {};
			var t = $('form').serializeArray();
			$.each(t, function() {
				d[this.name] = this.value;
			});
			var formJson = JSON.stringify(d);
			crCode(formJson)
			
		}

		// 二维码对象
		var qrcode;

		// 默认设置
		var content;
		var size;

		// 设置点击事件
		function crCode(data) {
			var name = $("#name").val();
			var tel = $("#tel").val();
			var tim = $("#tim").val();
			var code = $("#code").val();
			var sname = $("#sname").val();
			var stel = $("#stel").val();
			
			if(name==""||tel==""||tim==""||code==""||sname==""||stel==""){
				alert(language.information)
				return false;
			}
			
			// 获取内容
			content = data;
			content = content.replace(/(^\s*)|(\s*$)/g, "");

			// 获取尺寸
			size = document.getElementById("size").value;

			// 检查内容
			if(content == '') {
				alert(language.content);
				return false;
			}

			// 检查尺寸
			if(!/^[0-9]*[1-9][0-9]*$/.test(size)) {
				alert('请输入正整数');
				return false;
			}

			

			// 清除上一次的二维码

			if(qrcode) {
				document.getElementById("qrcode").innerHTML = "";
				qrcode.clear();
			}

			// 创建二维码
			qrcode = new QRCode(document.getElementById("qrcode"), {
				width: size, //设置宽高
				height: size
			});

			qrcode.makeCode(content);
			
			setTimeout(function() {
				var src = $("#qrcode img").attr("src")
				$("#tbody").append('<tr class="even_row"><td>'+name+'</td><td>'+tel+'</td><td>'+tim+'</td><td>'+code+'</td><td>'+sname+'</td><td>'+stel+'</td><td><img onclick="qrimg(this)" style="width: 30px;height: 30px;" src="'+src+'"></td><td>\
						<button>'+language.edit+'</button>\
						<button>'+language.delete+'</button>\
					</td></tr>')
				$('#Modal').modal('hide');
				console.log(src);
			}, 500)			
		}
	</script>

	</body>

</html>